<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="70px" label-position="right">
                    <el-row :gutter="41">
                         <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="query.provinceId" :name.sync="query.provinceName"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="query.cityId" :province="query.provinceId" :name.sync="query.cityName"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="query.areaId" :city="query.cityId" :name.sync="query.areaName"></region>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="消费类型">
                                <el-select v-model="query.consumpType" 
                                placeholder="请选择" style="width:100%" 
                                @change="selectType">
                                    <el-option v-for="(item,index) in consumpTypeList" :key="index"
                                     :label="item.typeName" :value="item.cashId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                         <el-col :span="7">
                            <el-form-item label="月份">
                                 <el-date-picker
                                    v-model="query.startDate" :clearable="false" :picker-options="query.pickerOptions1" :editable="false"  style="width:100%"
                                    type="month"
                                    placeholder="选择月份">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="7">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1" >
                <div class="charts-title">现金消费内容统计</div>
                <div class="charts-display" v-loading='chartLoading'>
                    <trendChart width='100%' height='100%' id="barChart1" :option='barChart1Option'></trendChart>
                </div>
            </div>
            <div slot="table">
                <div class="table-title">
                    <exportExcel @ee="exportFile"></exportExcel>
                </div> 
                <el-table :data="AnnounceList" border v-loading="loading" 
                style="width: 100%" 
                @sort-change='sortChange'>
                    <el-table-column label="消费类型" align="center">
                        <template scope="scope">
                            <span>{{scope.row.typeName | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="消费额" align="center" sortable='custom' prop="cash">
                        <template scope="scope">
                            <span>{{scope.row.cash | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="消费人数" align="center" sortable='custom' prop="num">
                        <template scope="scope">
                            <span>{{scope.row.num | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="人均消费额" align="center" sortable='custom' prop="averageCash">
                        <template scope="scope">
                            <span>{{scope.row.averageCash | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域" align="center">
                        <template scope="scope">
                            <span>{{scope.row.areaName| isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="城市" align="center">
                        <template scope="scope">
                            <span>{{scope.row.cityName | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="省份" align="center">
                        <template scope="scope">
                            <span>{{scope.row.provinceName | isNull}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container" style="text-align:right">
                    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" 
                    :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import trendChart from 'components/Charts/trendChart';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import exportExcel from 'components/ExportExcel';
    import { queryCashCon, listCashType } from 'api/pingtaifenxi';
    import { mapState, mapActions } from 'vuex';
    export default{
        components: { echartsLayout, province, city, region, trendChart, exportExcel },
        data() {
            return {
                chartLoading: false,
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                consumpTypeList: [],
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    provinceName: '',
                    cityName: '',
                    areaName: '',
                    consumpType: '',
                    startDate: moment(new Date()).format('YYYY-MM'),
                    pickerOptions1: {
                        disabledDate(time) {
                            return (time.getTime()) > (Date.now());
                        }
                    }
                },
                type: '', // 消费类型
                eventKey: '',
                cashStatus: 1,
                numStatus: '',
                averageCashStatus: '',
                AnnounceList: [],
                listQuery: {// 分页
                    page: 1,
                    total: 0
                },
                pickerOptions1: null,
                pickerOptions2: null,
                barChart1Option: null,
                filterList: null
               
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.listCashTypes();
            this.searchFetchData();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            onSubmit() {
                this.listQuery.page = 1;
                this.searchFetchData();
            },
            // 选择消费类型时
            selectType(val) {
                this.consumpTypeList.forEach(item => {
                    if (val === item.cashId) {
                        this.type=item.type;
                        this.eventKey=item.eventKey
                    }
                });
            },
            // 获取消费类型
            listCashTypes() {
                listCashType().then(res => {
                    this.consumpTypeList=res.data.content;
                    this.consumpTypeList.unshift({cashId: '', typeName: '请选择'})
                })
            },
            exportFile() {
                let provinceId = this.query.provinceId;
                let cityId = this.query.cityId;
                let areaId = this.query.areaId;
                let dateYear = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY'); 
                let dateMonth = this.query.startDate==''?'':moment(this.query.startDate).format('MM'); 
                let cashStatus = this.cashStatus;// 金额排序 0.升序 1.降序”
                let numStatus = this.numStatus;// 人数排序 0.升序 1.降序”, （
                let averageCashStatus = this.averageCashStatus;// 平均金额排序 
                let type=this.type;
                let eventKey=this.eventKey;
                window.location.href = `${LOCAL_API.scy}/report/outExcelByPayDetailInfo?provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&dateYear=${dateYear}&dateMonth=${dateMonth}&cashStatus=${cashStatus}&numStatus=${numStatus}&averageCashStatus=${averageCashStatus}&type=${type}&eventKey=${eventKey}`
            },
          // 列表
            searchFetchData() {
                this.loading = true;
                this.chartLoading= true;
                let curPage = this.listQuery.page;
                let pageSize = this.config.pageSize;
                let provinceId = this.query.provinceId;
                let cityId = this.query.cityId;
                let areaId = this.query.areaId;
                let dateYear = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY'); 
                let dateMonth = this.query.startDate==''?'':Number(moment(this.query.startDate).format('MM')); 
                let cashStatus = this.cashStatus;// 金额排序 0.升序 1.降序”
                let numStatus = this.numStatus;// 人数排序 0.升序 1.降序”, （
                let averageCashStatus = this.averageCashStatus;// 平均金额排序 
                let type=this.type;
                let eventKey=this.eventKey;
                queryCashCon(curPage, pageSize, provinceId, cityId, areaId, 
                    dateYear, dateMonth, cashStatus, numStatus, averageCashStatus, type, eventKey).then(res => {
                        this.loading = false;
                        this.chartLoading= false;
                        let echList=res.data.content.info;
                        let bar1=[];// 消费额
                        let bar2=[];// 消费人数
                        let bar3=[];// 人均消费额
                        let xAxisData=[];//
                        echList.forEach(val => {
                            bar1.push(val.cash)
                            bar2.push(val.num)
                            bar3.push(val.averageCash)
                            xAxisData.push(val.typeName)
                        })
                        this.barChart1Option = {
                            color: ['#2EC7C9', '#B6A2DE', '#5AB1EF'],
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            legend: {
                                data: ['消费额', '消费人数', '人均消费额']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: xAxisData,
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '消费额',
                                    type: 'bar',
                                    data: bar1 
                                },
                                {
                                    name: '消费人数',
                                    type: 'bar',
                                    data: bar2 
                                },
                                {
                                    name: '人均消费额',
                                    type: 'bar',
                                    data: bar3
                                }
                            ]
                        };
                        this.AnnounceList = res.data.content.list.list;
                        this.listQuery.total = res.data.content.list.pagination?res.data.content.list.pagination.total:0;
                    }).catch(() => {
                        this.loading = false;
                        this.chartLoading= false;
                    });
            },
            sortChange({ column, prop, order }) {
                this.cashStatus=prop=='cash'?order=='ascending'?0:1:'';
                this.numStatus=prop=='num'?order=='ascending'?0:1:'';
                this.averageCashStatus=prop=='averageCash'?order=='ascending'?0:1:'';
                this.searchFetchData();
            },
            handleSizeChange(val) {
                this.listQuery.page = 1;
                this.ChangePageSize(val);
                this.searchFetchData();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.searchFetchData();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     